<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
</head>
<style type="text/css">
    /* @font-face----Web字体,自己指定 可以用自己想用的字体*/
    @font-face {
        font-family: 'Myfont';
        font-style: normal;
        font-weight: normal;
        /* 也可以是已经下载好的 */
        src:url('./glyphicons-halflings-regular.woff');
    }
    
    p {
        padding: 5px;
        border: medium double black;
        background-color: lightgrey;
        margin: 2px;
        float: left;
        /* 字体 */
        font-family: Myfont ,sans-serif;
        font-size: medium;
    }
    #first{
        /* 大小 */
        font-size: xx-large;
        /* 粗细 */
        font-weight: bold;
    }
    #second{
        font-size: larger;
        font-style: italic;
    }
</style>

<body>
    <p>
        There are lots of different kinds of fruit - there are over 500 varieties
        of <span id="first">banana</span> alone. By the time we add the countless types of <span id="second"> apples, oranges,
        and other well-known fruit, we are faced with thousands of choides</span>.
    </p>
</body>

</html>